
<template>
  <div>
    <!-- 面包屑 -->
    <el-row>
      <el-col :span="23" :offset="1" style="margin-bottom: 30px;margin-top: 20px;">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/algor' }" class="bread"><i class="el-icon-location-outline"></i>算法管理</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/imageDetection' }" class="bread">图片检测</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row style="margin-bottom:15px">
      <el-col :span="5" :offset="2">
        <el-button class="butter" @click="openDialog(1)" round size="mini"><i class="el-icon-plus"></i>&ensp;新建合集 </el-button>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="22">
        <div class="mytable">
          <el-table height="500" stripe :data="tableList" class="tabletab">
            <el-table-column label="合集名称" prop="sampleSetName"></el-table-column>
            <el-table-column label="样本条数" prop="sampleSetNumber"></el-table-column>
<!--            <el-table-column label="状态" prop="sampleSetStatus"></el-table-column>-->
            <el-table-column label="时间" prop="createTime"></el-table-column>
            <el-table-column width="450px" label="操作" prop="operate">
              <template slot-scope="scope">
                <el-button size="mini" @click="uploadOpenDialog(scope.row)" icon="el-icon-upload2" plain>上传</el-button>
                <el-button size="mini" @click="startOpenDialog(scope.row.id)" icon="el-icon-data-line" plain>检测</el-button>
                <el-button size="mini" @click="openDialog(2,scope.row)" icon="el-icon-edit" plain>修改</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>

<!--    添加或者修改-->
    <el-dialog
        :title="dialogInfo.dialogTitle"
        :visible.sync="dialogInfo.dialogVisible"
        width="30%"
        :before-close="handleClose">
      <el-form :model="fromDate" label-width="100px">
        <el-form-item label="合集名称" prop="sampleSetName" :rules="[{ required: true, message: '合集名称必填' },]">
          <el-input
              v-model="fromDate.sampleSetName"
              type="text"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogInfo.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitSampleSet">确 定</el-button>
      </span>
    </el-dialog>

<!--    上传样本图片-->
    <el-dialog width="500px" :title="uploadDialogInfo.dialogTitle" :visible.sync="uploadDialogInfo.dialogVisible">
      <div style="display: flex;justify-content: center;align-items: center">
        <el-upload
            class="upload-demo"
            drag
            :limit="1"
            :file-list="fileList"
            :action=baseUrl+uploadUrl
            :on-exceed="handleExceed"
            :before-upload="beforeUpload"
            :http-request="customUpload"
            :on-success="handleUploadSuccess"
            :on-remove="handleRemove"
            multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传单张jpg/png文件，且不超过2MB!</div>
        </el-upload>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import Upload from "@/components/upload/Upload.vue";
import {getPage, insertSampleItem, insertSampleSet, start, updateSampleSet} from "@/api/sample/sampleApi";
import axios from "axios";
import getGenerateId from "@/util/generateID";
const baseUrl=process.env.VUE_APP_BASE_API;
export default {
  components: {Upload},
  data(){
    return{
      tableList:[{sampleSetName:"111",sampleSetNumber:"111",sampleSetStatus:"111",createTime:"111"}],
      dialogInfo:{
        dialogVisible:false,
        dialogTitle:"",
      },
      uploadDialogInfo:{
        dialogVisible:false,
        dialogTitle:"",
      },
      startDialogInfo:{
        dialogVisible:false,
        dialogTitle:"",
      },
      uploadCard:"pic",
      fromDate: {
        sampleSetName:"",
        sampleSetNumber:"",
        sampleSetStatus:"",
        createTime:""
      },
      dialogVisible: false,
      baseUrl:baseUrl,
      uploadUrl:"/file/uploadMultipartFileList",
      fileList:[],
      imageList: [],
      uploadDate:"",
      startValue:"",
      options: [],
    }
  },

  methods:{

    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    openDialog(type,data){
      this.resetFromDate();
      if(type===1){
        this.dialogInfo.dialogTitle="添加样本合集"
        this.dialogInfo.dialogVisible=true;
      }
      if(type===2){
        this.fromDate.sampleSetName=data.sampleSetName
        this.dialogInfo.dialogTitle="修改样本合集"
        this.dialogInfo.dialogVisible=true;
      }
    },
    resetFromDate(){
      this.fromDate= {
        sampleSetName:"",
        sampleSetNumber:"",
        sampleSetStatus:"",
        createTime:""
      }
    },
    getPage(){
      let data={
        pageNum:1,
        pageSize:10
      }
      getPage(data).then(res=>{
        this.tableList=res.rows;
      })
    },
    //新增
    addSampleSet(){
      let data={
        "sampleSetName":this.fromDate.sampleSetName
      }
      insertSampleSet(data).then(res=>{
        this.getPage();
      })
    },
    //修改
    updateSampleSet(){

    },

    // insertSampleItem(data){
    //
    // },

    //提交数据
    submitSampleSet(){
      this.dialogInfo.dialogVisible=false;
      if(this.dialogInfo.dialogTitle==="添加样本合集"){
        this.addSampleSet();
      }
      if(this.dialogInfo.dialogTitle==="修改样本合集"){
        this.updateSampleSet();
      }
    },
    uploadOpenDialog(row){
      this.uploadDate=row;
      this.uploadDialogInfo.dialogTitle="上传样本集";
      this.fileList=[];
      this.imageList=[];
      this.uploadDialogInfo.dialogVisible=true
    },
    // 文件超出数量限制
    handleExceed(files, fileList) {
      this.$message.warning(`最多上传1张图片，当前已选择 ${fileList.length} 张`);
    },
    // 上传前校验
    beforeUpload(file) {
      const isImage = ['image/jpeg', 'image/png'].includes(file.type);
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isImage) {
        this.$message.error('只能上传 JPG/PNG 格式的图片!');
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过 2MB!');
      }

      return isImage && isLt2M;
    },
    // 上传成功回调
    handleUploadSuccess(res) {
      // 处理上传完成的图片数据
      if(res.code==200){
        this.uploadDialogInfo.dialogVisible=false;
        this.$message.success("照片上传成功")
      }
    },
    // 删除文件
    handleRemove(file, fileList) {
      const index = this.imageList.findIndex(item => item.url === file.url);
      if (index !== -1) {
        this.imageList.splice(index, 1);
      }
    },
    //开启算法
    startOpenDialog(id){
      start(id).then(res=>{
        this.$message.success(res.msg)
      })
    },
    customUpload(options) {
      const formData = new FormData()
      const id=getGenerateId();
      formData.append('file', options.file)
      formData.append("bucketName", this.uploadDate.sampleSetId)
      formData.append("id",id)

      console.log(this.uploadDate)
      //手动发起请求
      axios.post(options.action, formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      }).then(res=>{
        if(res.data.code==200){
          const fileName = options.file.name;
          //insertSampleItem
          let sampleItem={
            id:id,
            sampleItemName:fileName,
            sampleItemPath:res.data.data,
            sampleSetId:this.uploadDate.id
          }
          insertSampleItem(sampleItem).then(res=>{

          })
          //UpdateSampleSet
          let sampleSet={
            "id":this.uploadDate.id,
            "sampleSetNumber":this.uploadDate.sampleSetNumber+1
          }
          updateSampleSet(sampleSet).then(res=>{
            this.getPage();
          })
          this.uploadDialogInfo.dialogVisible=false;
          this.$message.success("照片上传成功")
        }
      })
    }
  },
  created() {
    this.getPage();
  }
}
</script>


<style scoped>
.tabs-con{
  position: relative;
  z-index: 0; /* 确保 tabs 不是最顶层 */
}
.bread /deep/ .el-breadcrumb__inner{
  color: #000000;
}
.bread /deep/ .el-breadcrumb__inner:hover{color: #000000;}
.el-button{
  background-color: #4686D0;
  color: #ffffff;
  border: #4686D0;
  font-size: 12px;
  font-family: "微软雅黑";
}
.el-row{
  margin-top: 10px;
  /* margin-bottom:20px; */
}
.formselect /deep/ .el-form-item{
  margin-right: 30px;
}
.formselect /deep/ .el-form-item__label{
  color: #000000;
}
.el-input{
  width:250px;
}
.inputem /deep/ .el-input__inner {
  background-color: rgba(0, 0, 0, 0) ;
  border:1px solid #B1B4C5;
}
.inputem /deep/ .el-input__inner:focus{
  border:2px solid #4c87c2;
}
.inputem /deep/ .el-input__inner:hover{
  border:2px solid #4c87c2;
}

.inputem /deep/ .el-input-group__append{
  background-color: #265389;
  border:1px solid #265389;
}
.el-icon-search{
  color: #ffffff;
}
::v-deep .el-tabs__header{
  margin: 0px;
}
::v-deep .el-tabs__nav-scroll{
  width:20%;
  margin:0 auto;
}
::v-deep .el-tabs__item {
  color:#000000;
}
::v-deep .el-tabs__item.is-active {
  color: #31A1F9;
}

::v-deep .el-tabs__nav-wrap::after{
  height:1px;
  background-color: #265389;
}
.stepbox1, .stepbox2, .stepbox3{
  margin-top: 30px;
  width: 900px;
  height: 250px;
}


</style>
